<template>
  <el-dialog :model-value="show" title="分配角色" @close="$emit('hide')">
    <el-select
      v-model="list"
      multiple
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in roles"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <template #footer>
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, watch } from "vue";
import { getRoleByUserIdApi, getRoleListApi,updateUserRoleApi } from "./api";

const emit= defineEmits(["hide"]);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
});

const list = ref<number[]>([]);
const roles = ref<{ value: number; label: string }[]>([]);

getRoleListApi().then((res) => {
  if (res.code === 200) {
    roles.value = res.data.map((item) => ({
      value: item.id,
      label: item.name,
    }));
  }
});

watch(
  () => props.id,
  () => {
    getRoleByUserIdApi(props.id).then((res) => {
      if (res.code === 200) {
        list.value = res.data.map((item) => item.id);
      }
    });
  }
);

const submit=()=>{
    ElMessageBox.confirm('确定修改当前用户的角色吗？','修改用户角色',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning', 
    }).then(()=>{
        updateUserRoleApi(props.id,list.value).then((res)=>{
           if(res.code===200){
            emit('hide')
            ElMessage.success('修改成功')
           }
        })
    })
}
</script>
<style lang="less" scoped></style>
